/** * @name 菜单组件 * @description: * @param * @return */
<template>
	<view class="menuList">
		
		<div v-for="(value, key, idxs) of menuList" :key="idxs">
			<div class="menu-group">
				<!-- 主菜 -->
				<template v-if="key === 'main'">
					<menu-card-radio :menu="value" :type="'主菜'" @checkMenu="checkMenu($event, key)" ref="menuCardRadio"></menu-card-radio>
				</template>
			</div>
		</div>

		<div v-for="(value, key, idxs) of menuList" :key="idxs">
			<div class="menu-group">
				<!-- 副菜 -->
				<template v-if="key === 'side'">
					<menu-card-radio :menu="value" :type="'副菜'" @checkMenu="checkMenu($event, key)" ref="menuCardRadio"></menu-card-radio>
				</template>
			</div>
		</div>

		<div v-for="(value, key, idxs) of menuList" :key="idxs">
			<div class="menu-group">
				<!-- 青菜 -->
				<template v-if="key === 'vegetables'">
					<menu-card-radio :menu="value" :type="'青菜'" @checkMenu="checkMenu($event, key)" ref="menuCardRadio"></menu-card-radio>
				</template>
			</div>
		</div>

		<div v-for="(value, key, idxs) of menuList" :key="idxs">
			<div class="menu-group">
				<!-- 小食 -->
				<template v-if="key === 'staple'">
					<menu-card-radio :menu="value" :type="'小食'" @checkMenu="checkMenu($event, key)" ref="menuCardRadio"></menu-card-radio>
				</template>
			</div>
		</div>

		<div v-for="(value, key, idxs) of menuList" :key="idxs">
			<div class="menu-group">
				<!-- 其他 -->
				<template v-if="key === 'other'">
					<menu-card-check-box :menu="value" :type="'其他'" @checkMenu="checkMenu($event, key)" ref="menuCardCheckBox"></menu-card-check-box>
				</template>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';

	import menuCardRadio from "@/components/menuCard/menuCardRadio.vue"
	import menuCardCheckBox from "@/components/menuCard/menuCardCheckBox.vue"

	export default {
		components: {
			menuCardRadio,
			menuCardCheckBox
		},
		props: {
			menuList: {
				//菜单列表
				type: Object | String
			}
		},
		data() {
			return {
				changeMenuList:{},//右侧显示菜单
				checkedMenuList: {}, //勾选菜单
			};
		},
		watch:{
			menuList:{
				handler(val){
					// this.changeMenuList = val//点击左侧切换右侧显示菜单
					this.checkedMenuList = this.createCheckedMenu(val); //创建菜单列表
					// console.log(this.changeMenuList)
					console.log(this.checkedMenuList)
					
				},
				immediate:true,
				deep:true
			}
		},
		methods: {
			checkMenu(obj, key) {
				//选择菜品
				this.checkedMenuList[key] = obj;
			},
			clearCheckedMenuList() { //清空选中的菜单
				this.checkedMenuList = this.createCheckedMenu(this.menuList); //创建菜单列表
				this.$refs.menuCardRadio.map((item) => {
					item.clearChecked()
				})
				this.$refs.menuCardCheckBox.map((item) => {
					item.clearChecked()
				})

			},
			createCheckedMenu(obj) {
				//创建菜单列表
				let newObj = {};
				for (let key in obj) {
					if (key !== 'other') {
						newObj[key] = {
							id: '',
							name: '',
							title: '',
							isspicy: '',
							price: '',
							pic: '',
						};
					} else {
						newObj[key] = [];
					}
				}
				return newObj;
			}
		},
		// created() {
		// 	this.checkedMenuList = this.createCheckedMenu(this.menuList); //创建菜单列表
		// }
	};
</script>

<style></style>
